<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/demo01.css">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <!--            @select="handleSelect"-->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-submenu index="1">
                    <template slot="title">中国大陆</template>
                    <el-menu-item index="1-1">全球</el-menu-item>
                    <el-menu-item index="1-2">中国大陆</el-menu-item>
                    <el-menu-item index="1-3">中国香港</el-menu-item>
                    <el-menu-item index="1-3">中国台湾</el-menu-item>
                    <el-menu-item index="1-3">中国澳门</el-menu-item>
                </el-submenu>
                <!--                 @click="tologin"  @click="toreg"-->
                <el-menu-item index="2"><a id="login" href="#">亲，请登录</a></el-menu-item>
                <el-menu-item index="3"><a id="reg" href="#">免费注册</a></el-menu-item>
                <el-menu-item index="4">手机逛淘宝</el-menu-item>
                <el-menu-item index="5">网页无障碍</el-menu-item>
                <el-submenu index="6">
                    <template slot="title">我的淘宝</template>
                    <!--                     @click="tobuyed"-->
                    <el-menu-item index="6-1">已买到的宝贝</el-menu-item>
                    <el-menu-item index="6-2">我的足迹</el-menu-item>
                </el-submenu>
                <el-menu-item index="7"><i class="el-icon-shopping-cart-1"></i>购物车</el-menu-item>
                <el-submenu index="8">
                    <template slot="title">收藏夹</template>
                    <!--                     @click="tocol"-->
                    <el-menu-item index="8-1">收藏的宝贝</el-menu-item>
                    <el-menu-item index="8-2">收藏的店铺</el-menu-item>
                </el-submenu>
                <el-menu-item index="9">商品分类</el-menu-item>
                <el-menu-item index="10">免费开店</el-menu-item>
                <el-submenu index="11">
                    <template slot="title">千牛卖家中心</template>
                    <el-menu-item index="11-1">开店入驻</el-menu-item>
                    <el-menu-item index="11-2">已卖出的宝贝</el-menu-item>
                    <el-menu-item index="11-3">出售中的宝贝</el-menu-item>
                    <el-menu-item index="11-4">卖家服务市场</el-menu-item>
                    <el-menu-item index="11-5">卖家培训中心</el-menu-item>
                    <el-menu-item index="11-6">体验中心</el-menu-item>
                    <el-menu-item index="11-7">电商学习中心</el-menu-item>
                </el-submenu>
                <el-submenu index="12">
                    <template slot="title">联系客服</template>
                    <el-menu-item index="12-1">消费者客服</el-menu-item>
                    <el-menu-item index="12-2">卖家客服</el-menu-item>
                    <el-menu-item index="12-3">意见反馈</el-menu-item>
                    <el-menu-item index="12-4">网页版旺旺</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        <div class="main"></div>
        <el-main>
            <div class="one">
                <!--                @click="flushed"-->
                <img src="img/tb.png">
                <ul>
                    <li class="one-search">
                        <input v-model="input.data" placeholder="请输入内容">
                        <button class="bot" @click="search">搜索</button>
                    </li>
                    <li class="neirong">
                        <ul>
                            <li>新款连衣裙</li>
                            <li>四件套</li>
                            <li>潮流T恤</li>
                            <li>时尚女鞋</li>
                            <li>短裤</li>
                            <li>时尚女鞋</li>
                            <li>半身裙</li>
                            <li>男士外套</li>
                            <li>墙纸</li>
                            <li>行车记录仪</li>
                            <li>新款男鞋</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="user">
                <div class="left">
                    <div class="range"><span>分类</span></div>
                    <ul>
                        <li><i class="el-icon-sell"></i>&nbsp;&nbsp;&ensp;<span>女装</span></a> / <span>内衣</span> /
                            <span>奢品</span>
                        </li>
                        <li><i class="el-icon-goods"></i>&nbsp;&nbsp;&ensp;<span>女鞋</span></a> / <span>男鞋</span> /
                            <span>箱包</span>
                        </li>
                        <li><i class="el-icon-suitcase"></i>&nbsp;&nbsp;&ensp;<span>美妆</span></a> / <span>饰品</span>
                            / <span>洗护</span></li>
                        <li><i class="el-icon-shopping-bag-2"></i>&nbsp;&nbsp;&ensp;<span>男装</span></a> /
                            <span>运动</span> / <span>百货</span>
                        </li>
                        <li><i class="el-icon-mobile-phone"></i>&nbsp;&nbsp;&ensp;<span>手机</span></a> /
                            <span>数码</span> / <span>企业礼品</span>
                        </li>
                        <li><i class="el-icon-film"></i>&nbsp;&nbsp;&ensp;<span>家装</span></a> / <span>电器</span> /
                            <span>车品</span>
                        </li>
                        <li><i class="el-icon-fork-spoon"></i>&nbsp;&nbsp;&ensp;<span>食品</span></a> /
                            <span>生鲜</span> / <span>母婴</span>
                        </li>
                        <li><i class="el-icon-first-aid-kit"></i>&nbsp;&nbsp;&ensp;<span>医药</span></a> /
                            <span>保健</span> / <span>进口</span>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <div class="right-up">
                        <span class="tianmao"><a href="#">天猫</a></span>
                        <span class="juhuasuan"><a href="#">聚划算</a></span>
                        <span class="chaoshi"><a href="">天猫超市</a></span>
                        <span><a href="#">司法拍卖</a></span>
                        <span><a href="#">飞猪旅行</a></span>
                        <span><a href="#">天天特卖</a></span>
                        <span><a href="#">极有家</a></span>
                        <span class="zhibo"><a href="#">淘宝直播</a></span>
                    </div>
                    <div class="right-down">
                        <!-- 轮播图 -->
                        <div class="right-down-left">
                            <el-carousel trigger="click" height="298px">
                                <el-carousel-item v-for="item in 5" :key="item">
                                    <!-- <h3 class="small">{{ item }}</h3> -->
                                    <img v-if="item == 1" src="img/banner-1.png" width="555px">
                                    <img v-if="item == 2" src="img/banner-2.png" width="555px">
                                    <img v-if="item == 3" src="img/banner-3.png" width="555px">
                                    <img v-if="item == 4" src="img/banner-4.png" width="555px">
                                    <img v-if="item == 5" src="img/banner-5.png" width="555px">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="right-down-right">
                            <div class="right-down-right-user">
                                <div><img src="img/getAvatar.jpg" @click="handleLogout"></div>
                                <a href="#">Hi! {{name}}</a>
                                <el-dialog title="是否退出到登录界面？" :visible.sync="dialogFormVisible1">
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                        <el-button type="primary" @click="logout">确 定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div class="right-down-right-anniu">
                                <button class="login" @click="login">登录</button>
                                <button class="register" @click="register">注册</button>
                                <button class="kaidian">开店</button>
                            </div>
                            <div class="right-down-right-four">
                                <div class="four">
                                    <ul>
                                        <li><i class="el-icon-star-off"></i></li>
                                        <li class="text">宝贝收藏</li>
                                    </ul>
                                    <ul>
                                        <li><i class="el-icon-goods"></i></li>
                                        <li class="text">买过的店</li>
                                    </ul>
                                    <ul>
                                        <li><i class="el-icon-school"></i></li>
                                        <li class="text">收藏的店</li>
                                    </ul>
                                    <ul>
                                        <li><i class="el-icon-time"></i></li>
                                        <li class="text">我的足迹</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="right-down-right-tongzhi">
                                <div class="tongzhi">
                                    <span class="guize">规则</span>
                                    <span class="neirong">2023年5月淘宝重要新规速递</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods">
                <div class="goods-head">
                    <span>&nbsp;&nbsp;&ensp; 猜你喜欢</span>
                    <img src="img/xihuan.png">
                </div>
                <div class="goods-body">
                    <div class="item" v-for="(item, index) in goodsmes" :key="index">
                        <!-- img标签的属性要用v-bind绑定 -->
                        <img :src="item.imgsrc">
                        <div class="up">{{item.name}}</div>
                        <div class="down"><span class="yuan">&yen</span> <span class="price">{{item.price}}</span>
                        </div>
                        <el-button class="mai" size="mini" @click="handle(index)">购买</el-button>
                    </div>
                    <el-dialog :visible.sync="dialogFormVisible">
                        <ul class="buyh">
                            <li class="buybu">
                                <button type="button" @click="buy">购买</button>
                            </li>
                            <li class="carbu">
                                <button type="button" @click="dialogFormVisible=false">取消</button>
                            </li>
                        </ul>
                    </el-dialog>

                </div>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage4" :page-sizes="[3, 6, 9]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-main>
    </el-container>
</div>

</body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/js.cookie.min.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            name: '你好',
            username: '',
            activeIndex: '1',
            activeIndex2: '1',
            num: 0,
            currentPage4: 1,//当前页
            pageSize: 3,
            total: 10,
            dialogFormVisible1: false,//退出显示框
            dialogFormVisible: false,//购买显示框

            input: {
                data: '',
                currentPage4: 1,
                pageSize: 3
            },
            // 商品的信息
            goodsmes: [],
            carMes: {
                id: '',
                name: '',
                imgsrc: '',
                price: ''
            }
        },
        mounted() {
            this.init()
            var _this = this
            axios.get("/taobao/user/getName")
                .then(resp => {
                    // 实现用户名的初始化
                    // console.log(resp.data)
                    _this.name = resp.data.name
                    _this.username = resp.data.username
                })
        },
        methods: {
            init() {
                var _this = this
                axios.post("/taobao/goods/search", this.input)
                    .then(resp => {
                        // console.log(this.input)
                        if (resp.data == "none") {
                            alert("暂无数据")
                        } else {
                            // console.log(resp.data.list[0].price)
                            // console.log(resp.data.total)
                            // console.log(resp.data.list)
                            _this.goodsmes = resp.data.list
                            _this.total = resp.data.total
                            // console.log(_this.goodsmes)
                            // console.log(_this.total)
                        }
                    })
            },
            login() {
                location.href = "/taobao/login.html"//跳转登录页面
            },
            register() {
                location.href = "/taobao/register.html"//跳转注册页面
            },
            search() {
                // 查询
                this.init()
            },
            handle(index) {
                // 实现修改dialogFormVisible的值，让其自动打开表单
                var _this = this
                axios.get("/taobao/user/getSession")
                    .then(resp => {
                        if (resp.data == "none") {
                            alert("您还没进行登录，即将跳转登录界面!")
                            location.href = "/taobao/login.html"//跳转登录页面
                        } else if (resp.data == "succeed") {
                            console.log(1)
                            _this.num = index;
                            _this.dialogFormVisible = true
                        } else {
                            alert("网络问题")
                        }
                    })
            },
            buy() {
                var _this = this
                axios.get("/taobao/user/buy?price=" + _this.goodsmes[_this.num].price + "&username=" + _this.username)
                    .then(resp => {
                        if (resp.data == "notenough") {
                            alert("账户余额不足!")
                        } else if (resp.data == "succeed") {
                            alert("购买成功!")
                        } else {
                            alert("网络问题")
                        }
                    })
                this.dialogFormVisible = false
            },
            car() {
                // console.log(this.goodsmes[num].name);
                this.dialogFormVisible = false
            },
            handleLogout() {
                this.dialogFormVisible1 = true
            },
            logout() {
                axios.get("/taobao/user/logout")
                    .then(resp => {
                        window.location.href = "/taobao/login.html"
                    })
            },
            // 分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.input.pageSize = val
                // console.log(val)
                this.init()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage4 = val
                this.input.currentPage4 = val
                this.init()
            }

        }
    })
</script>

</html>